<template>
    <div>
        <ul class="list-reset widget-ul flex flex-wrap" v-if="source.length">
            <li class="flex" v-for="item in source">
                <div
                    class="img flex-no-shrink"
                    @click="fetchDetail(item._id)"
                    :style="'background-image: url(' + (item.img ? item.img : require('../../../static/images/noimg.gif')) + ')'">
                </div>
                <div class="flex flex-wrap content-between" :style="{height: '150px'}">
                    <div class="w-full desc leading-normal" @click="fetchDetail(item._id)" >
                        <!-- <div class="text-grey font-light">应用编号： {{ item.code }}</div> -->
                        <div class="title">{{ item.title }}</div>
                        <div>
                            <span class="font-light">{{ item.cats.map(el => el.catName).join('、') }}</span>
                        </div>
                    </div>
                    <div class="popular w-full flex justify-between items-end">
                        <div>
                            <i class="iconfont icon-eye"></i>
                            <span>{{ item.statistics ? item.statistics.pgNum : 0 }}</span>
                            <i class="iconfont icon-star"></i>
                            <span>{{ item.statistics ? item.statistics.favNum : 0 }}</span>
                            <i class="iconfont icon-share"></i>
                            <span>{{ item.statistics ? item.statistics.shaNum : 0 }}</span>
                        </div>
                        <time class="font-light">{{ item.updateTime | formatDate('yy-mm-ss') }}</time>
                    </div>
                </div>
            </li>
        </ul>

        <div v-show="!source.length"> 暂无数据 </div>
        <!-- 预览 -->
        <preview :category-text="categoriesText" :labels="labels" ref="preview"></preview>
    </div>
</template>

<script>
    import Preview from '../../components/widget/Preview';
    import {getCategorise} from '../../config/Cache';

    export default {
        components: {
            Preview
        },
        props: {
            source: {
                type: Array,
                default: () => {
                    return [];
                }
            }
        },
        data() {
            return {
                types: [],
                labels: [],
                options: []
            }
        },
        computed: {
            categoriesText() {
                return this.types
                    .filter(el => el)
                    .map(ele => this.findName(ele));
            }
        },
        methods: {
            // handle preview date
            fetchDetail(id) {
                this.loading = true;
                API.get('applications/' + id).then(res => {
                    this.types = res.cats.map(el => this.findCategoryArray(el.catId));
                    this.labels = res.labels.filter(el => el);

                    this.$refs.preview.open(res);
                }).finally(() => this.loading = false);
            },
            async fetchCategory() {
                this.options = await getCategorise();
            },
            findName(array) {
                return this.options.find(el => el.id === array[array.length - 1]).text;
            },
            findCategoryArray(sourceId) {
                const options = this.options;
                let arr = [];
                let isFinish = true;
                let id = sourceId;

                while (isFinish) {
                    const element = options.find(el => el.id === id);
                    if (element) {
                        arr.unshift(element.id);
                        if (element.parentid) {
                            id = element.parentid;
                        } else {
                            isFinish = false;
                        }
                    } else {
                        isFinish = false;
                    }
                }
                return arr;
            },
        },
        created() {
            this.fetchCategory();
        }
    }
</script>

<style lang="scss">
    .widget-ul {
        font-size: 0;
        // min-width: 860px;

        li {
            font-size: 16px;
            width: 49%;
            min-width: 390px;
            height: 185px;
            padding: 16px;
            margin-right: 2%;
            margin-top: 20px;
            border-radius: 8px;
            border: 1px solid #f0f0f0;

            &:nth-of-type(2n) {
                margin-right: 0;
            }

            @media (max-width: 1140px) {
                width: 100%;
                margin-right: 0;
            }

            .img {
                margin-right: 20px;
                width: 230px;
                height: 153px;
                cursor: pointer;
                background: transparent no-repeat center/cover;

                &:hover {
                    width: 230px;
                    height: 153px;
                    position: relative;

                    &::after {
                        content: '预览';
                        width: 230px;
                        height: 153px;
                        color: #fff;
                        line-height: 150px;
                        text-align: center;
                        display: inline-block;
                        background-color: rgba(0, 0, 0, .1);
                    }
                }

                @media (max-width: 1240px) {
                    width: 200px;
                    &:hover {
                        width: 200px;

                        &::after {
                            width: 200px;
                        }
                    }
                }
            }

            .desc {
                font-size: 16px;
                // height: 135px;
                overflow: auto;
                color: #666;

                &:hover {
                    cursor: pointer;
                    color: #02A7FB
                }
            }

            .title {
                font-size: 18px;
                line-height: 1.5em;
                max-height: 3em;
                overflow: hidden;
            }
        }
    }
</style>
